<template>
	<view>
		<view class="share">
			<!-- <view style="position: absolute;top: 0%;z-index: 9999;overflow: hidden;background-color: transparent;">
				<my-nav color="#000" :isShow="true" :isSwitchTab="false"></my-nav>
			</view> -->
			<canvas canvas-id="shareCanvas" @longpress="save" catchtouchmove="true"
				:style="{height: canvasHeight+'rpx',width:canvasWidth+'rpx'}" >
			</canvas>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				id: '',
				back_img: '',
				code_img: '',
				token: '',
				pageData: {
					post_img: '',
					codePng: null
				},
				ctx: null,
				windowObj: {},
				canvasHeight: '',
				canvasWidth: '',
				// 分享标题
				shareTitle:'',
				// 分享uid
				shareUid:''
			}
		},
		onReady() {
			//初始化画布
			this.ctx = wx.createCanvasContext('shareCanvas')
		},
		onLoad(option) {
			console.log(option);
			this.token = uni.getStorageSync('token') || 0;
			this.id = option.id;
			// this.shareTitle = option.title;
			if(option.uid){
				uni.setStorageSync('shareuid',option.uid)
			}
			this.getQrcode();
		},
		methods: {
			async getQrcode() {
				let res = await uni.$http('POST','qrcode/getQrcode',{id:this.id});
				console.log('海报',res);
				if(res.code == 1){
					this.pageData.post_img = res.data.web_poster;
					this.pageData.codePng = res.data.qrcode_url;
					this.exportPost();
				}else{
					uni.$u.toast(res.msg)
				}
			},
			getImageInfo(src) {
				return new Promise((resolve, reject) => {
					wx.getImageInfo({
						src,
						success: (res) => resolve(res),
						fail: (res) => reject(res)
					})
				});
			},
			save(){
				let that = this;
				wx.showShareImageMenu({  //分享给朋友
					path: that.pageData.first_post_img,
					success: (ress) => {
					},
					fail: (err) => {
					}
				})
			},
			exportPost() {
				// uni.showLoading({
				// 	title:'海报生成中'
				// })
				//image是画布的底图，后期可以换成自己需要的
				// let image ='https://cn.bing.com/images/search?view=detailV2&ccid=QLvpleW0&id=5B6A695B602912680FC5C239AE13A3EBA4F4E0F3&thid=OIP.QLvpleW0sVvyaVndJJLvPQHaEo&mediaurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR40bbe995e5b4b15bf26959dd2492ef3d%3frik%3d8%252bD0pOujE645wg%26riu%3dhttp%253a%252f%252fwww.pp3.cn%252fuploads%252f1212qxn%252f476.jpg%26ehk%3dna1tDwMwrncjRAg1A9ROG%252bkj4YZrklFwjUCYQl2c8yo%253d%26risl%3d%26pid%3dImgRaw&exph=1200&expw=1920&q=%e5%9b%be%e7%89%87&simid=607996108042012442&ck=DB9394719A910317FE77BFF4E17674F8&selectedIndex=9&qpvt=%e5%9b%be%e7%89%87&FORM=IRPRST' 
				//获取系统的基本信息，为后期的画布和底图适配宽高
				let image = this.pageData.post_img
				uni.getSystemInfo({
					success: (res)=> {
						console.log(res);
						this.windowObj = res
						this.windowObj.ratio = this.windowObj.windowWidth / 750 //因为小程序是用rpx单位，为了是后期合成的图片更好是适应各个手机屏幕的尺寸，这里先计算出一个比率，后面除以这个比率就可以对各个手机尺寸进行适配了
						this.canvasWidth = this.windowObj.windowWidth / this.windowObj.ratio //设置画布的宽高
						this.canvasHeight = this.windowObj.windowHeight / this.windowObj.ratio
						// this.canvasWidth = this.windowObj.windowWidth* 2
						// this.canvasHeight = this.windowObj.windowHeight * 2
						console.log(this.windowObj.windowHeight,this.canvasHeight);
						Promise.all([this.getImageInfo(image), this.getImageInfo(this.pageData.codePng)]).then(
							res => {
								//获取底图和二维码图片的基本信息,通常前端导出的二维码是base64格式的，所以要转成图片格式的才可以获取图片的基本信息			
								let arr = [{
										width: res[0].width,
										height: res[0].height
									},
									// {width:res[1].width/this.windowObj.pixelRatio,height:res[1].height/this.windowObj.pixelRatio}
									{
										width: res[1].width/2.8,
										height: res[1].height/2.8
									}
								]
								// this.ctx.drawImage(res[0].path, 0, 0, this.windowObj.windowWidth, res[0]
								// 	.height * this.windowObj.ratio);
								this.ctx.drawImage(res[0].path, 0, 0, this.windowObj.windowWidth, this.windowObj.windowHeight);
								this.ctx.drawImage(res[1].path, (this.windowObj.windowWidth-arr[1].width)/2, (this.windowObj.windowHeight-arr[1].height)-130,arr[1].width,arr[1].height);
								// this.ctx.font = "48px serif";
								// this.ctx.fillText("Hello world", 10, 50);
								this.ctx.draw(false, ()=> {
									wx.canvasToTempFilePath({
										x: 0,
										y: 0,
										width: this.windowObj.windowWidth,
										height: this.windowObj.windowHeight,
										destWidth: this.windowObj.windowWidth * 2, //这里乘以2是为了保证合成图片的清晰度
										destHeight: this.windowObj.windowHeight * 2,
										canvasId: 'shareCanvas',
										fileType: 'jpg', //设置导出图片的后缀名
										success: (res)=> {
											console.log('导出图片',res);
											this.pageData.first_post_img = res.tempFilePath
											//保存图片到本地
											// uni.saveImageToPhotosAlbum({
											// 	filePath: this.pageData
											// 		.first_post_img,
											// 	success: ()=> {
											// 		uni.hideLoading()
											// 		uni.showToast({
											// 			title: '保存成功'
											// 		})
											// 	},
											// })
										}
									})
								});
							})
					}
				})
			},

		},
		// onShareAppMessage(){
		// 	let pages = getCurrentPages()
		// 	let prePage = pages[pages.length - 1];
		// 	return{
		// 		path:`/${prePage.route}?uid=${uni.getStorageSync('uid')}&id=${this.id}`
		// 	}
		// },
		// onShareTimeline() {
		// 	return{
		// 		query:`uid=${uni.getStorageSync('uid')}&id=${this.id}`
		// 	}
		// }
	}
</script>

<style>

	
</style>
